<template>
  <div class="pagePay">
    <div class="my-header">
      <i class="back iconfont icon-left" @click="Back"></i>
      <strong>订单支付</strong>
      <i class="myMsg"></i>
    </div>
    <div class="payContainer">
      <div class="order-info-container" v-if="orderData">
        <div class="cell-container">
          <div class="cell-item">
            <div>共{{orderData.orderNum}}笔订单</div>
            <div>订单总金额(含运费)<span class="amount">&yen;{{orderData.orderPayPrice|formatMoney}}</span> </div>
          </div>
          <div class="cell-item">
            <p>
              <label>订单号:</label><span>{{orderItem.orderCode}}</span>
            </p>
          </div>
          <div class="pay-order-detail" v-if="showDetailInfo">
            <div class="order-item" v-for="(item ,index) in orderData.orderGoodsList" :key="index">
              <!--<p>
                <label>订单号: </label><span>{{item.orderCode}}</span>
              </p>-->
              <p>
                <label>商品信息:</label><span class="title">{{item.sellingPoints}}</span>
              </p>
              <!--<p>
                <label>发货仓:</label><span>{{item.supplierWarehouse}}</span>
              </p>-->
              <p>
                <label>商品价格: </label><span class="amount">&yen;{{item.goodsDiscountPrice|formatMoney}}</span>  *{{item.goodsNum}}
              </p>
              <!--<p>
                <label>收货信息: </label><span>{{item.receiver}} {{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.orderAddress}},
                        {{item.orderPhone|hidePhone}}</span>
              </p>-->
            </div>
          </div>
          <div class="cell-item">
            <p>
              <label>收货信息: </label><span>{{orderItem.receiver}} {{orderItem.provinceName}} {{orderItem.cityName}} {{orderItem.areaName}} {{orderItem.orderAddress}},
              {{orderItem.orderPhone|hidePhone}}</span>
            </p>
          </div>
          <div class="cell-item">
            <div>发货仓{{orderData.supplierNum}} 运费总计：{{orderData.orderFreight|formatMoney}}</div>
          </div>
          <div class="cell-item show-more" @click="showPayDetail"><span>显示订单明细</span><i :class="{ 'arrow-up' : showClass, 'arrow-down': !showClass}"></i></div>
        </div>

      </div>
      <div class="cell-container">
        <div class="cell-title">
          <div class="left">
            <span>支付方式</span>
          </div>
        </div>
        <div class="cell-list">
          <div class="cell-item" v-for="(item,index) in payStrategy" :key="item.id">
            <div class="left">
              <i :class="item.class+'-icon'"></i> <span>{{item.name}}</span>
            </div>
            <div class="right">
              <span class="mint-checkbox">
                <input type="radio" v-model="selected"  class="mint-checkbox-input" v-bind:value="item.value" :id="item.id" > 
                <label   v-bind:for="item.id" class="mint-checkbox-core"></label>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="orderData" class="payOnline" :class="payStrategy[selected].class" @click="PaySubmit">
      {{payStrategy[selected].name}}：{{orderData.orderPayPrice|formatMoney}}元
    </div>
  </div>
</template>

<script>
  import {
    getPayOrder,
    payOrder
  } from '@/api/shop'
  import {
    MessageBox,
    Toast
  } from 'mint-ui'

  import {
    mapGetters
  } from 'vuex'
  const pingpp = require('pingpp-js')
  export default {

    data() {
      return {
        orderData: {
          orderPayPrice: 0,
          orderFreight: 0
        },
        orderItem: {},
        payType: 3, // 支付类型 1微信 2支付宝 3H5微信支付
        showDetailInfo: false,
        showClass: false,
        selected: 0,
        payStrategy: [
          // {
          //   id: 'jqPay',
          //   value: 0,
          //   name: '智荟金桥',
          //   class: 'jq'
          // }
          {
            id: 'wechat',
            value: 0,
            name: '微信支付',
            class: 'weixin'
          }
        ],
        visiblePopup: {
          paymentContainerVisible: false
        },
        jqPayForm: {
          cardNo: '',
          resetSendPhoneMessage: null,
          code: ''
        }

      }
    },
    components: {},
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      // 返回
      Back() {
        MessageBox({
          title: '确认要离开订单支付吗？',
          cancelButtonText: '继续支付',
          confirmButtonText: '确认离开',
          message: '您的订单在30分钟内未支付将被取消,请尽快完成支付',
          showCancelButton: true
        }).then(action => {
          if (action === 'confirm') {
            this.$router.go(-1)
          }
        })
      },
      // 隐藏显示商品详情
      showPayDetail() {
        // 显示隐藏支付订单详情
        this.showDetailInfo = !this.showDetailInfo
        // 显示隐藏icon 样式
        this.showClass = !this.showClass
      },
      // 确定支付
      PaySubmit() {
        const _this = this
        const payParams = {
          orderId: this.$route.query.orderid,
          open_id: this.userInfo.openId,
          userId: this.userInfo.id,
          price: this.orderData.orderPayPrice,
          payType: this.payType
        }

        payOrder(payParams).then(res => {
          pingpp.createPayment(res.data.charge, (result, err) => {
            if (result === 'success') {
              Toast('支付成功')
              _this.$router.replace('/paysuccess')
              // 只有微信公众号 (wx_pub)、微信小程序（wx_lite）、QQ 公众号 (qpay_pub)支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL
            } else if (result === 'fail') {
              Toast('支付失败')
              // Ping++ 对象 object 不正确或者微信公众号/微信小程序/QQ公众号支付失败时会在此处返回
            } else if (result === 'cancel') {
              Toast('取消支付')
              // 微信公众号、微信小程序、QQ 公众号支付取消支付
            }
          })
        }).catch(err => {
          console.log(err)
        })
      },
      initData() {
        if (this.$route.query.orderid) {
          const params = {
            orderId: this.$route.query.orderid,
            userId: this.userInfo.id // 用户id
          }
          getPayOrder(params)
            .then(res => {
              this.orderData = res.data.orderDetails
              this.orderItem = res.data.orderDetails.orderGoodsList[0]
            }).catch(err => {
              console.log(err)
            })
        }
      }
    },
    mounted() {
      // 刷新当前页面
      this.initData()
    }
  }

</script>
<!-- createdOrder -->
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .clear {
    width: 16px;
    height: 16px;
    margin: 0;
    position: absolute;
    right: 10px;
    @include bg('~assets/common/images/close.png');
  }

  .pagePay {
    .payContainer {
      padding: 1.25rem 0;
      .order-info-container {
        background: #FAFDFF;
        @include flexbox(space-between,
        center,
        column,
        nowrap);
        .cell-container {
          background: #FAFDFF;
          margin-top: 0;
          width: 100%;
          .cell-item {
            @include flexbox(space-between,
            center,
            row,
            nowrap);
            padding: $padding;
            border-bottom: 1px solid #E7ECF1;
            .amount {
              color: red;
              padding-left: 5px;
            }
            p {
              @include flexbox(space-between,
              center,
              row,
              nowrap);
              align-items: flex-start;
              line-height: 20px;
              label {
                width: 80px;
                padding-right: 10px;
              }

              span {
                flex: 1;
                text-align: right;
              }
              .title {
                @include textoverflow(1);
              }
            }
          }
          .pay-order-detail {
            padding: $padding;
            border-bottom: 1px solid #E7ECF1;
            .order-item {
              border-bottom: 1px solid #E7ECF1;
              p {
                @include flexbox(space-between,
                center,
                row,
                nowrap);
                align-items: flex-start;
                line-height: 20px;
                label {
                  width: 80px;
                  padding-right: 10px;
                }

                span {
                  flex: 1;
                  text-align: right;
                }
                .title {
                  @include textoverflow(1);
                }
                .amount{
                  color:$red;
                }
              }
              &:last-child {
                border-bottom: 0;
              }
            }
          }
          .show-more {
            color: #AFB0B1;
            .arrow-up {
              display: inline-block;
              width: 12px;
              height: 12px;
              margin-left: 5px;
              background: url('~assets/common/images/arrow_gray_top.png') center center no-repeat;
              background-size: 100% auto;
            }
            .arrow-down {
              display: inline-block;
              width: 12px;
              height: 12px;
              margin-left: 5px;
              background: url('~assets/common/images/arrow-down.png') center center no-repeat;
              background-size: 100% auto;
            }
          }
        }
      }
      .cell-container {
        background: #fff;
        margin-top: $margin;

        .cell-title {
          @include flexbox(space-between,
          center,
          row,
          nowrap);
          padding: $padding;
          border-bottom: 1px solid #eee;
          .left {
            span {
              font-size: $title;
              color: #333;
              font-weight: 500;
            }
          }
          .right {
            @include flexbox(flex-end,
            center,
            row,
            nowrap);
            span {
              color: $orange;
            }
            .arrow-right {
              display: block;
              width: 16px;
              height: 16px;
              background: url('~assets/common/images/arrow-right.png') no-repeat;
              background-size: auto 100%;
            }
          }
        }
        .cell-list {
          padding-left: $padding;
          .cell-item {
            @include flexbox(space-between,
            center,
            row,
            nowrap);
            border-bottom: 1px solid #eee;
            padding: $padding $padding $padding 0;
            .left {
              .jq-icon {
                vertical-align: middle;
                width: 23px;
                height: 20px;
                display: inline-block;
                background: url('~assets/common/images/balance_pay.png') no-repeat;
                background-size: 100%;
              }
              .weixin-icon {
                vertical-align: middle;
                width: 26px;
                height: 25px;
                display: inline-block;
                background: url('~assets/common/images/wx_pay.png') no-repeat;
                background-size: 100%;
              }
              span {
                font-size: $title;
                color: #333;
                font-weight: 500;
              }
            }
            .right {
              @include flexbox(flex-end,
              center,
              row,
              nowrap);
              span {
                color: $orange;
              }
              .arrow-right {
                display: block;
                width: 16px;
                height: 16px;
                background: url('~assets/common/images/arrow-right.png') no-repeat;
                background-size: 100%;
              }
            }
          }
        }
      }
    }
    .payOnline {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      font-size: 15px;
      @include flexbox(center,
      center,
      row,
      nowrap);
      color: #fff;
      background: #FF5959;
      text-align: center;
      padding: 15px;
      &.weixin {
        background: #00B700;
      }
    }
  }

  .paymentLoading {
    position: fixed;
    @include flexbox(center,
    center,
    row,
    nowrap);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    img {
      background: rgba(0, 0, 0, .6);
      width: 3rem;
    }
  }

</style>
